<template>
  <div>
    <section>
      <el-form ref="form" :model="queryForm" :inline="true" class="queryForm adjustCondition">
        <el-form-item label="关键字:">
          <el-input clearable  v-model="queryForm.keyword" placeholder="请输入物流伙伴名称/手机号查询"></el-input>
        </el-form-item>
        <el-form-item label="关联时间:">
          <el-date-picker
            v-model="queryForm.date"
            type="datetimerange"
            class="adjustDate"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="queryForm.checkedState" placeholder="全部">
            <el-option
              v-for="item in  $dictUtils.getDictList('state')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button type="primary" class="search-btn" @click="getList">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <div>
      <el-button type="primary" size="small" @click="add">新增</el-button>
      <!--<el-button type="primary" size="small" @click="add" v-if="hasPermission('company:companyTree:add')">新增</el-button>-->
      <section class="right-but" style="display:flex;margin-bottom:0px">
        <el-button type="text" style="margin-right:-13px;cursor:pointer;" @click="getList()">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
        </el-button>
        <PopoverBut :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </div>

    <el-table v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName" @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="names" label="物流伙伴名称" min-width="240">
        <template slot-scope="scope">
          {{scope.row.names | noValue}}
        </template>
      </el-table-column>
      <el-table-column prop="contactName" label="联系人" min-width="100">
      </el-table-column>
      <el-table-column prop="contactPhone" label="手机号" min-width="140">
      </el-table-column>

      <el-table-column prop="createDate" label="关联时间" min-width="180">
        <template slot-scope="scope">
          {{scope.row.createDate | noValue}}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="110">
        <template slot-scope="scope">
          <div class="state" :class="{normal: scope.row.state === 1,empty: scope.row.state === -1, invalid: scope.row.state === 0}"><span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}</div>
        </template>
      </el-table-column>
      <span v-for="(item,index) in checkedProps" :key="index">
        <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item ==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy && scope.row.createBy.name">
                       {{scope.row.createBy.name | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy && scope.row.updateBy.name">
                     {{scope.row.updateBy.name | noValue}}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item" min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
      </span>
      <el-table-column prop="address" label="操作" width="150px">
        <template slot-scope="scope">
        	<el-link v-if="scope.row.state == -1" type="primary" :underline="false" @click="verify(scope.row)">去验证</el-link>
          <el-link v-if="scope.row.state == -1" type="primary" :underline="false" @click="del(scope.row.id)">删除</el-link>
          <el-link v-if="scope.row.state == 1" type="primary" :underline="false" @click="disable(scope.row.id)">停用</el-link>
          <el-link v-if="scope.row.state == 0" type="primary" :underline="false" @click="enabled(scope.row.id)">启用</el-link>
          <!--<el-link v-if="hasPermission('company:companyTree:edit') && scope.row.state == -1" type="primary" :underline="false" @click="edit(scope.row)">去验证</el-link>
          <el-link v-if="hasPermission('company:companyTree:del') && scope.row.state == -1" type="primary" :underline="false" @click="del(scope.row.id)">删除</el-link>
          <el-link v-if="hasPermission('company:companyTree:edit') && scope.row.state == 1" type="primary" :underline="false" @click="disable(scope.row.id)">解除关联</el-link>
          <el-link v-if="hasPermission('company:companyTree:edit') && scope.row.state == 0" type="primary" :underline="false" @click="edit(scope.row)">重新关联</el-link>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="page.pageSize"
      :current-page="page.pageNo" layout="total,prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <EditForm ref="editForm" @refreshDataList="getList()"></EditForm>
  </div>
</template>
<script>
  import {
  	getCompanyList,
  	delCrm,
  	editState
  } from '@/api/secondCarrier/crm.js'
  import EditForm from './editForm'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      PopoverBut,
      EditForm
    },

    data() {
      return {
        msg: '',
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [
          {
            label: '创建人',
            key: 'createBy.loginName'
          },
          {
            label: '创建时间',
            key: 'createDate'
          },
          {
            label: '上次操作人',
            key: 'updateBy.loginName'
          },
          {
            label: '上次操作时间',
            key: 'updateDate'
          }
        ],
        tableData: [],
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        loading: false,
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        queryForm: {
          keyword: '',
          date: null,
          checkedState: ''
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 获取列表带分页
      getList () {
        this.loading = true
        getCompanyList({
        	props:',3,',
          pageSize: this.page.pageSize,
          pageNo: this.page.pageNo,
          orderBy: this.orderBy.name,
          orderByAORC: this.orderBy.method,
          names: this.queryForm.keyword,
          startTime: this.queryForm.date == null ? null : this.queryForm.date[0],
          endTime: this.queryForm.date == null ? null : this.queryForm.date[1],
          state: this.queryForm.checkedState
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
          this.loading = false
        })
      },
      // 启用
      enabled(id) {
        this.loading = true
      	editState({
      	  id: id,
      	  state: 1
      	}).then(res => {
        	this.loading = false
      	  if (res.data.code === '200') {
      	    this.getList()
      	    this.$message({
      	      type: 'success',
      	      message: '已启用'
      	    })
      	  }
      	})
      },
      //停用
      disable (id) {
        this.$confirm('您是否要解除关联?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=> {
        	this.loading = true
          editState({
            id: id,
            state: 0
          }).then(res => {
        		this.loading = false
            if (res.data.code === '200') {
              this.getList()
              this.$message({
                type: 'success',
                message: '已解除关联'
              })
            }
          })
        })
      },
      // 删除客户
      del (id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          delCrm({
            ids: id
          }).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '已删除!'
              })
              this.getList()
            }
          })
        });
      },
      // 添加
      add () {
        this.$refs.editForm.init('add')
      },
      // 验证
      verify(row) {
      	this.$refs.editForm.init('verify', row)
      },
      // 是否显示某列数据
      handlerCloumn(e) {
        this.checkedProps = e
      },
      // 重置查询条件
      reset() {
        this.queryForm = {
          keyword: '',
          date: null,
          checkedState: ''
        }
        this.getList()
      },
      // 排序
      sortthiscolumn(a) {
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.getList()
      },
      handleSizeChange() {},
      handleCurrentChange(e) {
        this.page.pageNo = e
        this.getList()
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 32px;
    width: 180px;
  }

  ::v-deep .el-radio {
    margin-right: 15px;
  }

  ::v-deep.queryForm {
    position: relative;

    >.el-form-item {
      margin-bottom: 20px;
      margin-right: 50px;
      &:first-child{
        .el-input__inner{
          width: 230px;
        }
      }
      &:last-child{
        margin-right: 0;
      }
      .el-select{
        .el-input__inner{
          width: 175px;
        }
      }
    }
  }

  .right-but {
    float: right;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
</style>
